<template>
  <div id="Exercise">
    <my-title :left-slot="false" :title="$route.meta.title" font-color="fontBlack" background-color="white"></my-title>
    <div class="project">
      <div class="exercise">
        <div class="box">
          <div class="con" v-for="item in list" :key="item.id" @click="$router.push(item.path)">
            <p :class="['iconfont' , item.icon , item.color]"></p>
            <em>{{ item.name }}</em>
          </div>
        </div>
      </div>
      <div class="arrange">
        <h1>近期模考</h1>
        <div>
          <span>默认排序</span>
          <em>时间</em>
        </div>
        <van-empty description="暂无安排，请期待" />
      </div>
    </div>
  </div>
</template>

<script>
import MyTitle from "@/components/title/myTitle";
import { Empty } from "vant";
export default {
  name: "Exercise",
  components: {
    MyTitle,
     [Empty.name]: Empty,
  },
  data() {
    return {
      list: [
        {
          id: 0,
          name: "考点专练",
          icon: "icon-lianxi1",
          path: "/point",
          color: "aqua",
        },
        {
          id: 1,
          name: "套卷练习",
          icon: "icon-shu",
          path: "/paperPage",
          color: "red",
        },
        {
          id: 2,
          name: "仿真模考",
          icon: "icon-shijuan",
          path: "/exam",
          color: "orange",
        },
        {
          id: 3,
          name: "错题练习",
          icon: "icon-xingtuxuetang-lianxi-",
          path: "/errorques",
          color: "blue",
        },
        {
          id: 4,
          name: "简史",
          icon: "icon-fenlei",
          path: "/assess",
          color: "green",
        },
        {
          id: 5,
          name: "习题收藏",
          icon: "icon-aixin",
          path: "/practice",
          color: "khaki",
        },
      ],
    };
  },
  methods: {},
  created() {},
};
</script>

<style lang="scss" scoped>
#Exercise {
  background-color: #eee;

  .project {
    padding: 60px 10px 10px 10px;
    width: 100%;
    height: 100%;

    .exercise {
      width: 100%;
      padding: 10px 20px;
      background-color: white;
      border-radius: 4px;

      .box {
        display: flex;
        flex-wrap: wrap;
        //align-items: center;
        text-align: center;

        .con {
          flex-basis: 25%;
          padding: 10px;

          p {
            width: 40px;
            height: 40px;
            margin: auto;
            line-height: 40px;
            border-radius: 50%;
            border: 1px solid #eee;
            margin-bottom: 15px;
            font-size: 16px;
          }
        }
      }
    }

    .arrange {
      background-color: white;
      margin-top: 15px;
      padding: 10px;
      border-radius: 4px;

      h1 {
        font-size: 16px;
        color: #aaa;
        padding: 0 0 15px 0;
      }

      div {
        display: flex;
        justify-content: space-between;

        span {
          color: red;
        }
      }
    }
  }

  .aqua {
    color: aqua;
  }

  .red {
    color: red;
  }

  .orange {
    color: orange;
  }

  .blue {
    color: blue;
  }

  .green {
    color: green;
  }

  .khaki {
    color: khaki;
  }
}
</style>